class snake{
    //表示蛇头的元素
    snakehead:HTMLElement;
    //包括head
    snakebodys:HTMLCollection;
    //获取蛇的容器
    snake:HTMLElement
    constructor() {
        this.snakehead=document.querySelector('#snake>div') as HTMLElement;
        this.snakebodys=document.getElementById("snake")!.getElementsByTagName('div')!;
        this.snake=document.getElementById('snake')!;
    }
    //获取蛇的坐标(蛇头)
    get X(){
        return this.snakehead.offsetLeft
    }
    get Y(){
        return this.snakehead.offsetTop
    }
    //设置坐标
    set X(value){
         //如果新值和旧值相等，直接返回不再修改
        if(this.X===value){
            return;
        }
        //x的合理范围是0-290
        if(value<0||value>290){
            //进入判断说明蛇撞墙了，抛出一个异常
            throw new Error("蛇撞墙了")
        }
        // 左走时不能右走
        if(this.snakebodys[1]&&(this.snakebodys[1] as HTMLElement).offsetLeft===value){
            //当第二节和头同位置时，就表明发生了掉头
            //防止掉头，使他反方向移动
            if(value>this.X){
                //使其向左走
                value=this.X-10;
            }else{
                //使其向右走
                value=this.X+10;
            }
        }
        this.moveBody()
        this.snakehead.style.left=value+'px';
        //检查有没有撞到自己
        this.checkHeadBody()
    }
    set Y(value){
        //如果新值和旧值相等，直接返回不再修改
        if(this.Y===value){
            return;
        }
        if(value<0||value>290){
            //进入判断说明蛇撞墙了
            throw new Error("蛇撞墙了")
        }
        if(this.snakebodys[1]&&(this.snakebodys[1] as HTMLElement).offsetTop===value){
            //当第二节和头同位置时，就表明发生了掉头
            //防止掉头，使他反方向移动
            if(value>this.Y){
                //使其向上走
                value=this.Y-10;
            } else{
                //使其向下走
                value=this.Y+10;
            }
        }
        this.moveBody()
        this.snakehead.style.top=value+'px';
        this.checkHeadBody()
    }
    //蛇增加身体的方法
    addBody(){
        //向snake中添加div     在元素后面添加beforeend
        this.snake.insertAdjacentHTML("beforeend","<div></div>")
    }
    //增加一个蛇身体移动的方法
    moveBody(){
        /*
        * 将后面的身体设置为前面身体的位置
        * */
        //遍历获取所有的身体
         for(let i=this.snakebodys.length-1;i>0;i--){
             //获取前面身体的位置
             let x=(this.snakebodys[i-1] as HTMLElement).offsetLeft
             let y=(this.snakebodys[i-1] as HTMLElement).offsetTop;
             //将值设置到当前身体中
             (this.snakebodys[i] as HTMLElement).style.left=x+'px';
             (this.snakebodys[i] as HTMLElement).style.top=y+'px';

         }

    }
    //检查蛇头撞到自己的方法
    checkHeadBody(){
        //获取所有身体，检查是否与蛇头的坐标重叠
        for(let i=1;i<this.snakebodys.length;i++){
            let bd=this.snakebodys[i] as HTMLElement
            if(this.X===bd.offsetLeft&&this.Y===bd.offsetTop){
               //判断说明撞到自己，游戏结束
                throw new Error("撞到身体了！")
            }
        }
    }
}
export default snake;